<template>
  <div>
    <el-dialog
      title="创建菜单"
      :visible.sync="dialogVisible"
    >
      <el-form ref="formMenu"
      :rules="ruleMenu"
      :model="formMenu">
        <el-form-item label="权限组名称">
          <el-radio-group v-model="type" @change="handleChooseType">
            <el-radio :disabled="typeStatus" label="menu">菜单</el-radio>
          <el-radio :disabled="typeStatus" label="2">权限点</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="权限组名称">
            <el-select  style="width:60%">
                <el-option v-for="item in dataList"
                :value="item.id"
                :key="item.id"
                :label="item.title"
                :disabled="type === 'points'&& !!item.childs">
                </el-option>
            </el-select>
        </el-form-item>

         <div>
          <el-form-item label="权限代码" prop="code">
            <el-input v-model="formMenu.code"></el-input>
          </el-form-item>
          <el-form-item label="权限代码" prop="title">
            <el-input v-model="formMenu.title"></el-input>
          </el-form-item>
        </div>

      </el-form>

      <div slot="footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit('formMenu')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { add, list, detail, update } from '@/api/base/menus.js'
const that = []
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      input: '',
      typeStatus: false,
      showPointBlock: false,
      radio: 1,

      dataList: [], // 下拉选择列表
      // data数据
      formMenu: {

      }

    }
  },
  methods: {
    // 切换菜单权限
    handleChooseType () {}
  }
}
</script>

<style>
.el-form{
    text-align: left;
}
.el-form-item{
    display: flex;

    width: 80% !important

}
.el-input{
    width: 180%;
}
</style>
